<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //一维数组带pid转树形tree结构
      let linearArray = [
        { id: 1 },
        { id: 2 },
        { id: 3 },
        { id: 4 },
        { id: 5 },
        { id: 6, pid: 1 },
        { id: 7, pid: 6 },
        { id: 8, pid: 7 },
        { id: 9, pid: 1 },
        { id: 10, pid: 2 },
      ];
      //第一种办法
      // function formatTree(originDataTree) {
      //   const _linearArray = JSON.parse(JSON.stringify(originDataTree));
      //   function _formatTree(dataTree) {
      //     let sonIds = []; //有父级id

      //     for (const item of dataTree) {
      //       if (item.pid) {
      //         for (const item2 of dataTree) {
      //           if (item.pid === item2.id) {
      //             item2.children = item2.children || [];
      //             item2.children.push(item);
      //             _formatTree(item2.children);
      //           }
      //         }
      //       }
      //       sonIds.push(item.id);
      //     }
      //     // console.log(sonIds);
      //   }
      //   _formatTree(_linearArray);

      //   return _linearArray;
      // }
      // console.log(linearArray);
      // console.log(formatTree(linearArray));
      // console.log(linearArray);
      // // 第二种办法 会改变数组
      // function arrToTree(arr) {
      //   arr.forEach((item) => {
      //     let children = arr.filter((v) => item.id === v.pid);
      //     // console.log(children, item);
      //     item.children = children.length > 0 ? (item.children = children) : [];
      //   });
      //   return arr;
      // }
      // console.log(arrToTree(linearArray));
      // console.log(linearArray);

      // 第三种办法，
      // 完成代码
      // list 是需要遍历的扁平数组
      function arrToTree2(list) {
        //定义最终需要返回的树形结构数据
        const treeData = [];
        // 循环遍历传入的数组
        list.forEach((item) => {

          // 判断 pid为0时 是否有顶级 如果是顶级 直接添加到 treeData
          if (!item.pid) {
            // 就将这个值添加到 新数组内
            treeData.push(item);
          }
          // 查找子级,查找子级 需要和list 每一项对比
          // 对比关系 每一项的pid 是否等于当前项的id
          const children = list.filter((data) => data.pid === item.id);
          // console.log(children.length && children)
          // 查看 children 是否有子级  如果没有 不作任何处理
          if (!children.length) return;
          // 如果 chilidren 有数据 就把数据赋值到item.chilren 在子节点上面置放children,因为是引用类型会直接修改原数据的结构所以可以不用递归实现
          item.children = children;
        });
        return treeData; // 返回遍历后的数组
      }
      console.log(linearArray);
      console.log(arrToTree2(linearArray));
    </script>
  </body>
</html>
